<template>
	<view class="note-page">
		<!-- tabs -->
		<wd-tabs v-model="tab">
			<wd-tab title="全部">
			</wd-tab>
			<wd-tab title="工作">
			</wd-tab>
			<wd-tab title="生活">
			</wd-tab>
		</wd-tabs>

		<!-- 列表 -->
		<wd-cell v-for="item in list" :key="item.id" :title="item.title" :label="item.content" @click="onView(item)"
			clickable border>
			<template #icon>
				<image v-if="item.type == 'live'" class="item-icon" src="/static/live.jpg"></image>
				<image v-else class="item-icon" src="/static/work.jpg"></image>
			</template>
		</wd-cell>

		<!-- 浮动按钮 -->
		<wd-fab :draggable="true" :expandable="false" @click="onAdd"></wd-fab>
	</view>

</template>

<script lang="ts" setup>
	import { computed, ref } from 'vue';
	import { useNoteStore } from '@/stores/note';
	import { Note } from '@/types/note';
	const note = useNoteStore()//缓存

	const tab = ref(0)

	const list = computed(() => {
		let list = []
		switch (tab.value) {
			case 0:
				list = note.noteList
				break
			case 1:
				list = note.workNotes
				break
			case 2:
				list = note.liveNotes
				break
		}
		return list
	})

	function onAdd() {
		uni.navigateTo({
			url: '/pages/note/edite'
		})
	}
	function onView(item : Note) {
		uni.navigateTo({
			url: `/pages/note/edite?id=${item.id}`
		})
	}
</script>

<style lang="scss" scoped>
	.note-page {
		padding-top: var(--status-bar-height);
		.item-icon {
			margin-right: 20rpx;
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
		}
		/**
		 * cell组件右侧的图表一直都存在
		 */
		:deep(.wd-cell__right){
			display: none;
		}
	}
</style>